<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	/*		需要处理兼容问题的，我们用★标记
		
		//事件绑定的第一种形式：
			
			obj.onclick = 事件函数;

			特点 ： 一个对象只能绑定一个事件函数，如果再绑定另一个事件函数，则后者会覆盖前者。			
	*/

	/*
		//事件绑定的第二种形式：

			特点 : 一个对象只能绑定多个事件函数,都可执行，互不相影响。
			
			书写格式：

				★★I E 下 : obj.attachEvent( '事件名称', 事件函数 );						【IE7及以下只认这种写法，实现不了捕获】

						1）事件名称 有on

						2）没有捕获

						3）事件函数执行的顺序：标准IE => 正序	非标准IE => 倒序

						★4）事件函数中的this指向window
				
					例如 ： oDiv.attachEvent( 'onclick', fn1 );

				★★标准下 : obj.addEventListener( '事件名称', 事件函数, 是否捕获 )			【标准的IE具备两种写法】

						1）事件名称 没有on

						2）是否捕获，默认不捕获即false。。捕获：ture，冒泡：false

						3）事件函数执行的顺序：=> 正序
						
						★4）事件函数中的this指向触发该事件的对象

					例如 : oDiv.attachEvent( 'click', fn1, ture );
	*/

		function fn1(){
			alert(1);
		}

		function fn2(){
			alert(2);
			alert(this);
		}

		function fn3 () {
			alert(this)
		}

		document.onclick = fn1;

		//document.onclick = fn2;								// 2 && HTMLDocument    fn2会覆盖掉fn1	( 一对一 )

		//document.attachEvent( 'onclick', fn2 )				// 1 && 2 && window★	( 一对多 )
		
		document.addEventListener( 'click', fn2, false );		// 1 && 2 && HTMLDocument★	( 一对多 )

		//---------- 兼容封装 --------------
			function blind( obj, evName, fn ){
				if ( obj.addEventListener ) {
					obj.addEventListener( evName, fn, false )
				}else{
					obj.attachEvent( 'on'+ evName, function(){
						fn.call( obj );									//fn.call（obj）将obj.attachEvent这种方法在IE下this默认指向window改为obj
					} )
				}
			}
		//----------------------------------

		//blind( document, 'click', fn3 );		// HTMLDocument
	</script>
</head>
<body>
	
</body>
</html>